import React from 'react';
import utils from '@/utils';
import {Image, Skeleton, Spin} from 'antd';
import styles from './index.less';

const queryById = (id: number) => {
   return utils.request.get('/chromosome/' + id);
};

export default function LazyImage(props: { id?: number }) {
   const imageBase64Data = React.useState<string>();
   React.useEffect(() => {
      props.id && queryById(props.id).then(({data}) => {
         data?.path && imageBase64Data[1](data.path);
      });
   }, [props.id]);
   return <div className={styles.layout}>
      <Spin spinning={!imageBase64Data[0]} tip='图片加载中'>
         {
            imageBase64Data[0] ?
               <Image src={imageBase64Data[0]} className={styles.image} /> :
               <Skeleton.Image className={styles.image} />

         }
      </Spin>
   </div>;
}
